<template>
  <div class="navbar">
    <div class="logo">
      <span class="title-img"></span>
      <span class="title-label">{{ titleName }}</span>
    </div>
    <div v-show="mapCol == 24" class="map-but">
      <hamburger
        :toggle-click="toggleSideBar"
        :is-active="sidebar.opened"
        class="hamburger-container"
      />
      <map-button></map-button>
    </div>
    <div class="right-menu">
      <Menu ref="Menu"></Menu>
      <span class="el-icon-search search"></span>
      <el-dropdown class="avatar-container right-menu-item" trigger="hover">
        <div class="right-menus icon_user">
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item, i) in planList" :key="i">
            <span style="display:block;" @click="goPathP(item)">{{item.name}}</span>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import logo_png from "@/assets/logo.png";
import user_png from "@/assets/user.png";
import Hamburger from "@/components/Hamburger";
import Menu from "@/components/Menu";
import MapButton from "@/components/MapButton";
import { mapGetters } from "vuex";
export default {
  components: { Hamburger, MapButton, Menu },
  data() {
    return {
      logo_png: logo_png,
      user_png: user_png,
      titleName: "杰狮自然资源一体化审批系统",
      planList: [
        {
          key: "home",
          name: "首页",
          path: "/home",
        },
        {
          key: "yzt",
          name: "平台门户",
          path: "/gmap",
        },
        {
          key: "personalCenter",
          name: "个人中心",
          path: "/personalCenter",
        },
        {
          key: "bdgl",
          name: "后台管理",
          path: '/form',
        }
      ]
    };
  },
  computed: {
    language() {
      return this.$store.getters.language;
    },
    sidebar() {
      return this.$store.getters.sidebar;
    },
    dot_value: function () {
      return this.$store.getters.notice;
    },
    hidden: function () {
      return !this.dot_value > 0;
    },
    mapCol() {
      return this.$store.state.app.mapCol;
    },
    ...mapGetters(["sidebar", "realname", "permission_routers"]),
  },
  watch: {},
  methods: {
    logout() {
      this.$store.dispatch("LogOut").then(() => {
        this.$store.dispatch("moduleKey", this.permission_routers[1].key);
        location.reload();
      });
    },
    changLang: function (lang) {
      this.$i18n.locale = lang;
      this.$store.dispatch("setLanguage", lang);
    },
    toggleSideBar() {
      const store = this.$store;
      this.$store.dispatch("toggleSideBar").then(function () {
        Object.keys(store.state.app.chartListener).forEach((key) => {
          store.state.app.chartListener[key].resize();
        });
      });
    },
    //主菜单
    goPathP(item){
      console.log(item)
      if (item.key === "home") {
        window.location.href = '';
       
      } else {
        window.localStorage.setItem("menuIndex", 0);
        this.setKey(item.key);
        this.$router.push({ path: item.path });
      }
    },
    setKey(key) {
      this.$store.dispatch("moduleKey", key);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.navbar {
  background: #000000;
  width: 100%;
  box-sizing: border-box;
  height: 64px;
  line-height: 64px;
  display: flex;
  padding: 0 20px;
  .logo {
    color: #fff;
    margin-top: 4px;
    margin-right: 30px;
    display: flex;
    align-items: center;
    .title-img {
      display: inline-block;
      width: 32px;
      height: 32px;
      background: url(../../assets/shouye/logo.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 6px;
    }
    .title-label {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }

  .map-but {
    height: 100%;
  }

  .el-dropdown {
    padding: 0 10px;
    height: 100%;
  }

  .hamburger-container {
    line-height: 64px;
    height: 64px;
    float: left;
    padding: 0 10px;
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    flex: 1;
    height: 64px;
    display: flex;

    &:focus {
      outline: none;
    }

    .el-badge {
      vertical-align: inherit;
    }

    .right-menus {
      margin-left: 25px;
      transition: 0.3s ease-in;
      margin: 0 10px;
      height: 64px;
      position: relative;

      a {
        display: inline-block;
        color: #d9e6f3;
        opacity: 0.8;
        font-size: 14px;
        position: relative;
        height: 64px;
        line-height: 64px;
      }

      span {
        position: absolute;
        width: 22px;
        height: 22px;
        line-height: 22px;
        background: #ff0500;
        border-radius: 50%;
        color: #fff;
        font-size: 12px;
        text-align: center;
        top: 0;
        left: -11px;
      }
    }

    .right-menus:hover {
      opacity: 1;
    }

    .right-menus.icon_message {
      background: url(../../assets/ico_message.png) left center no-repeat;
    }

    .right-menus.icon_user {
      display: inline-block;
      width: 30px;
      height: 30px;
      background: url(../../assets/icon_user.png) no-repeat;
      background-size: 100% 100%;
      margin-bottom: -8px;
      background-position: 100% 100%;
    }

    .right-menu-item {
      display: inline-block;
      margin: 0 8px;
    }

    .screenfull {
      height: 20px;
    }

    .international {
      vertical-align: top;
    }

    .theme-switch {
      vertical-align: 15px;
    }

    .search {
      color: #fff;
      font-size: 25px;
      line-height: 64px;
      cursor: pointer;
      &:hover {
        color: #0085ff;
      }
    }

    .avatar-container {
      height: 64px;
      // width: 105px;
      margin-left: auto;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style><style lang="scss">
.right-menu .el-badge__content.is-fixed {
  right: auto;
  left: 23px;
  top: 0;
  transform: none;
}

.right-menu .el-badge {
  cursor: pointer;
}

.right-menu .el-badge:hover .right-menus {
  opacity: 1;
}

.right-menu .el-badge__content {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 0;
  border-radius: 50%;
  padding: 0;
}

.navbar svg.hamburger {
  vertical-align: middle;
  fill: #fff;
  opacity: 0.8;
  transition: 0.3s ease-in;
  transition-property: opacity;
}

.navbar svg.hamburger:hover {
  opacity: 1;
}

.navbar .el-dropdown svg.svg-icon {
  vertical-align: middle;
  color: #fff;
  opacity: 0.8;
  transition: 0.3s ease-in;
  transition-property: opacity;
}

.navbar .el-dropdown svg.svg-icon:hover {
  opacity: 1;
}
</style>